<template>
  <div class="internship" slot="body">
    <Header></Header>

    <div class="box-card">
      <el-card id="hot_job" style="margin-top: 20px" >
        <el-row>
          <span>工作城市：</span>
          <el-tag style="font-size: 15px;margin-right: 5px">{{choose_city}}</el-tag>
          <el-button style="border: none" @click="choose_addr('全国')">全国</el-button>
          <el-button style="border: none" @click="choose_addr('北京市')">北京市</el-button>
          <el-button style="border: none" @click="choose_addr('上海市')">上海市</el-button>
          <el-button style="border: none" @click="choose_addr('广州市')">广州市</el-button>
          <el-button style="border: none" @click="choose_addr('深圳市')">深圳市</el-button>
          <el-button style="border: none" @click="choose_addr('杭州市')">杭州市</el-button>
          <el-button style="border: none" @click="choose_addr('天津市')">天津市</el-button>
          <el-button style="border: none" @click="choose_addr('厦门市')">厦门市</el-button>
          <el-button style="border: none" @click="choose_addr('重庆市')">重庆市</el-button>
          <el-button style="border: none" @click="to_area">更多<i class="el-icon-arrow-right"></i></el-button>
        </el-row>
        <el-row>
          <span>薪资要求：</span>
          <el-tag style="font-size: 15px;margin-right: 5px">{{choose_money}}</el-tag>
          <el-button style="border: none">0-3k</el-button>
          <el-button style="border: none">3-6k</el-button>
          <el-button style="border: none">6-10k</el-button>
          <el-button style="border: none">10-15k</el-button>
          <el-button style="border: none">15-30k</el-button>
          <el-button style="border: none">30k以上</el-button>
        </el-row>
        <el-row>
          <span>公司规模：</span>
          <el-tag style="font-size: 15px;margin-right: 5px">{{choose_scale}}</el-tag>
          <el-button style="border: none;">少于30人</el-button>
          <el-button style="border: none">30-99人</el-button>
          <el-button style="border: none">100-199人</el-button>
          <el-button style="border: none">200-499人</el-button>
          <el-button style="border: none">500人以上</el-button>
        </el-row>
      </el-card>

      <br><br>

      <el-card v-for="i in job_list" :key="i.id" style="margin-top: 10px;width: 950px">
        <el-row>
          <div @click="job_detail(i.id)" style="cursor: pointer">
            <el-col :span="9">
              <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;">
                <span>{{i.title}}</span>
              </el-row>
              <el-row style="margin-top: 20px;color: #909399">
                <span>{{i.education}}/{{i.experience}}</span>
                <span style="float: right;font-size: 13px;color: #909399;">[{{i.createTime}}发布]</span>
              </el-row>
            </el-col>

            <el-col :span="3" style="margin-left: 5px;color: #F56C6C;font-size:20px">
              <span>{{i.money}}</span>
            </el-col>
          </div>

          <div @click="company_detail(i.company)" style="cursor: pointer">
            <el-col :span="8">
              <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">
                <span>{{i.company}}</span>
              </el-row>
              <el-row style="margin-top: 20px;color: #909399">
                <span>{{i.addr}}/{{i.type}}</span>
              </el-row>
            </el-col>

            <el-col span="3">
              <img :src="i.picture" alt="" style="width: 80px;height: 80px;float: right">
            </el-col>
          </div>

        </el-row>
      </el-card>

      <el-card style="width: 270px;position: absolute;top: 302px;right: 150px">
        <div slot="header" class="clearfix" style="text-align: center">
          <span>热门职位</span>
        </div>
        <div v-for="(i,index) in job_list" :key="i.id" v-if="index<5">
          <div @click="job_detail(i.id)" style="cursor: pointer">
            <el-row
              style="margin: 5px 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;">
              {{i.title}}
            </el-row>
            <el-row style="color: #F56C6C;">{{i.money}}</el-row>
          </div>
          <el-row @click.native="company_detail(i.company)"
                  style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">
            {{i.company}}
          </el-row>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      style="text-align: center;margin-top: 50px"
      :total="5">
    </el-pagination>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'Internship',
    components: {Header, Footer},
    created () {
      var query = this.$route.query
      if (query.addr && query.addr!='全国') {
        this.choose_city = query.addr
        this.$axios.post('http://localhost:8081/job/selectByJob', {
          'tag': 3,
          'addr': query.addr
        }).then((res) => {
          const result = res.data
          this.job_list = result.data
        })
      } else {
        this.choose_city = '全国'
        this.$axios.post('http://localhost:8081/job/selectByJob', {
          'tag': 3
        }).then((res) => {
          const result = res.data
          this.job_list = result.data
        })
      }


    },
    data () {
      return {
        job_type: 'first',
        choose_city: '广州市',
        choose_financing: '不限',
        choose_scale: '不限',
        choose_industry: '不限',
        choose_education: '不限',
        choose_experience: '不限',
        choose_money: '不限',
        job_list: [
          {
            'title': 'Java开发工程师',
            'education': '专科以上',
            'experience': '经验不限',
            'create_time': '2022-01-20 17:39',
            'money': ' 6-9K',
            'company': '联奕科技',
            'scale': '500-999人',
            'type': '已上市',
            'picture': 'https://img.bosszhipin.com/beijin/mcs/bar/20191217/6b9d3f1fd09c23e037cc61b44479fceebe1bd4a3bd2a63f070bdbdada9aad826.jpg?x-oss-process=image/resize,w_100,limit_0'
          },
          {
            'title': '【应届生】Java服务端开发工程师 ',
            'education': '不限',
            'experience': '经验不限',
            'create_time': '2022-01-20 17:39',
            'money': '5-8K·13薪',
            'company': '漫灵游戏',
            'scale': '100-299人',
            'type': 'A轮',
            'picture': 'https://img.bosszhipin.com/beijin/mcs/chatphoto/20171012/faaeea5e627fd42888755ab3fbab0074cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0'
          },
          {
            'title': '后端工程师-飞书人力套件',
            'education': '本科',
            'experience': '经验不限',
            'create_time': '2022-01-20 17:39',
            'money': '15-25K·15薪',
            'company': '北京字节跳动',
            'scale': '1000人以上',
            'type': 'D轮及以上',
            'picture': 'https://img.bosszhipin.com/beijin/mcs/chatphoto/20201123/424d60a634b16f6d498bb81a1ecc4fb882e5997348729a6cfe816ad90c892e55_s.jpg?x-oss-process=image/resize,w_100,limit_0'
          },
        ],
      }
    },
    methods: {
      choose_addr (address) {
        this.choose_city = address
        this.$router.push({query: {addr: this.choose_city}})
        this.$router.go(0)
      },
      to_area () {
        this.$router.push({path: 'area', query: {origin: 'job'}})
      },
      job_detail (id) {
        this.$router.push({path: 'job_detail', query: {id: id}})
      },
      company_detail (company) {
        this.$axios.post('http://localhost:8081/company/selectByCompany', {
          'auditStatus': 1,
          'companyName': company
        }).then((res) => {
          const result = res.data
          this.$router.push({path: 'company_detail', query: {id: result.data[0].id}})
        })

      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
